<template>
  <div class="copyNot c-p">
    <watermark
      v-if="showExamWatermark"
      :watermarkContent="examWatermarkConfig && examWatermarkConfig.contentType == 2 ? examWatermarkConfig.content : ''"
      :fontSize="examWatermarkConfig && examWatermarkConfig.size ? examWatermarkConfig.size : 14"
      :contentFillStyle="examWatermarkConfig && examWatermarkConfig.color ? examWatermarkConfig.color : '#999999'"
      :opacityNum="examWatermarkConfig ? examWatermarkConfig.transparent / 100 : 0.3"
    ></watermark>
    <audio id="audio" preload="auto" @error="playAudioError" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <audio id="nextAudio" preload="auto" class="c-pf c-p-l-100"></audio>
    <countdown-voice ref='startAnimation' v-if="showStart" @hideCountdown="hideCountdown"></countdown-voice>
    <div :class="type == 2 ? 'c-pb200' : ''" v-if="examinationInfo">
      <div class="c-mb64">
        <div class="c-flex-row c-aligni-center c-justify-sb c-ph32 c-pv15 top-bx ">
          <div class="c-w33 c-fs24 c-fc-sblack c-textAlign-l">{{examinationInfo.number}}<span class="c-fc-gray">/{{examinationInfo.wholeNum}}</span></div>
          <div class="c-w33 c-fs26 c-fc-sblack c-textAlign-c">{{type == 1 ? '单选题' : (type == 2 ? '多选题': '朗读题')}}</div>
          <div class="c-w33 c-flex-row c-aligni-center c-ph10 c-bg-time c-pv5 c-br8">
            <span v-if="examinationInfo.paperInfo && examinationInfo.paperInfo.isStop != -1" @click="pauseExam"
              class="iconfont c-pr20 c-fs32 c-fc-mblue"
            >&#xe7a7;</span>
            <span class="c-fc-mblue c-fs24">{{ answerTime }}</span>
          </div>
        </div>
        <div ref="illustrationBar" v-if="type == 6 && showIllustration" class="c-p c-flex-row c-hh64 c-ph130 bg-f5 c-aligni-center c-justify-sb c-text-hidden">
          <div class="c-flex-row c-aligni-center">
            <span class="c-hh20 c-ww20 c-brp50 c-bg-666 c-mr10"></span>
            <span class="c-fs24 c-fc-sblack">通过</span>
          </div>
          <div class="c-flex-row c-aligni-center">
            <span class="c-hh20 c-ww20 c-brp50 wrong-cir c-mr10"></span>
            <span class="c-fs24 c-fc-sblack">待加强</span>
          </div>
          <div class="c-flex-row c-aligni-center">
            <span class="c-hh20 c-ww20 c-brp50 right-cir c-mr10"></span>
            <span class="c-fs24 c-fc-sblack">优秀</span>
          </div>
          <span @click="hideIllustration" class="iconfont c-fs20 c-fc-sblack c-pa c-p-r32 c-p-t22">&#xe61b;</span>
        </div>
      </div>
      <div class="c-ph48 c-br10" v-if="examinationInfo.avatar && examinationInfo.avatar[0].avatar">
        <img class="c-w100 c-br10" :src="$addXossFilter(examinationInfo.avatar[0].avatar, require('../../../assets/default3_5.png'))" alt="">
      </div>
      <div class="c-ph64" v-if="problemShowType == 3">
        <div class="c-fs30 c-fw-b c-lh48 c-fc-sblack c-mt32" :class="isReject == 1 ? 'colorB' : ''" v-if="examinationInfo.problem && (!wordAnly || isReject == 1)">{{examinationInfo.problem}}</div>
        <div class="c-fs30 c-fw-b c-lh48 c-mt32" v-html="wordAnly" v-if="examinationInfo.problem && wordAnly && isReject == 0"></div>
        <div class="c-fs24 c-fc-gray c-mt8" v-if="examinationInfo.translate && type == 6">{{examinationInfo.translate ? examinationInfo.translate : ''}}</div>
      </div>
      <div class="c-pt80" v-if="type == 1 || type == 2">
        <img @click="firstPlay" v-if="showFirstSpeak" class="c-ww100 c-hh100 c-mlr-auto" :src="require('../../../assets/i/wap/exam/play.png')" alt="">
        <img @click="replay" v-if="(!showLoudspeaker && examModel == 2) && !showFirstSpeak" class="c-ww100 c-hh100 c-mlr-auto" :src="require('../../../assets/i/wap/exam/play.png')" alt="">
        <img v-if="showLoudspeaker && !showFirstSpeak" class="c-ww100 c-hh100 c-mlr-auto" :src="require('../../../assets/i/wap/exam/loudspeaker.gif')" alt="">
      </div>
      <div class="c-ph48 c-flex-row c-flexw-wrap c-mt160" :class="opList.length < 3 ? 'c-justify-sa' : ''" v-if="answerShowType == 1 && (type == 1 || type == 2) && (isQuestionEnd == 1||examinationInfo.assetStatus == -1)">
        <div class="c-w25 c-hh100 c-flex-row c-flex-center c-mb24" v-for="(item, index) in opList" :key="index">
          <div @click="clickOption(index)" :class="[playAudioIndex == index ? 'in' : '', playAudioIndex >= index||examinationInfo.assetStatus == -1 ? 'c-flex-row' : 'hide-important', item.status == 0 ? 'option-bg' : (item.status == 1 ? 'option-choose' : (item.status == 2 ? 'stripe-right' : 'stripe-wrong'))]" class="c-fs36 c-fc-sblack c-ww100 c-hh100 c-brp50 c-flex-center option-bg">{{opLetter[index]}}</div>
          <div :class="playAudioIndex >= index||examinationInfo.assetStatus == -1 ? 'hide-important' : 'c-flex-row'" class="c-ww32 c-hh32 c-brp50 option-bg c-flex-center"><div class="c-ww12 c-hh12 c-brp50 c-bg-white"></div></div>
        </div>
      </div>
      <div class="c-ph90 c-mt64 c-flex-row c-flexw-wrap c-justify-sb" v-if="answerShowType == 7 && (type == 1 || type == 2)">
        <div @click="clickOption(index)" class="c-ww200 c-mb40" v-for="(item, index) in opList" :key="index">
          <div class="c-p">
            <img class="c-w100 c-br10" :src="$addXossFilter(item.imgSrc, require('../../../assets/default3_5.png'))" alt="">
            <div v-if="item.status == 2" class="c-pa c-w100 c-h c-p-l0 c-p-t0 c-br10 c-bg-black right-bg c-flex-row c-flex-center"><span class="iconfont c-fc-white c-fs48">&#xe82c;</span></div>
            <div v-if="item.status == 3" class="c-pa c-w100 c-h c-p-l0 c-p-t0 c-br10 c-bg-black wrong-bg c-flex-row c-flex-center"><span class="iconfont c-fc-white c-fs48">&#xe964;</span></div>
            <div v-if="item.status == 1" class="c-pa c-w100 c-h c-p-l0 c-p-t0 c-br10 c-bg-black choose-bg c-flex-row c-flex-center"></div>
          </div>
          <div class="c-fs26 c-fc-sblack c-textAlign-c c-mt16">{{opLetter[index]}}</div>
        </div>
      </div>
      <div class="c-ph30 c-mt64 c-flex-row c-flexw-wrap c-justify-sb" v-if="answerShowType == 5 && (type == 1 || type == 2)">
        <div @click="clickOption(index)" class="c-flex-row c-aligni-start c-pv30 c-ph30 c-mb30 c-br10 c-ww580 c-p" v-for="(item, index) in opList" :key="index" :class="item.status == 0 ? 'stripe-none' : (item.status == 1 ? 'option-choose c-fc-white' : (item.status == 2 ? 'stripe-right' : 'stripe-wrong'))">
          <span class="c-fs28 c-flex-shrink0 c-mr40">{{opLetter[index]}}</span>
          <div>
            <div>
              <img class="c-ww200 c-br10" :src="$addXossFilter(item.imgSrc, require('../../../assets/default3_5.png'))" alt="">
            </div>
            <div class="c-fs22 c-mt10">{{item.text}}</div>
            <div class="iconfont c-fc-white c-fs48 c-pa c-p-t32 c-p-r32" :class="item.status == 3 ?'icon-cuo':item.status == 2 ? 'icon-duihao':''"></div>
          </div>
        </div>
      </div>
      <!-- //自行上传选项类型  1://有文字,存在图片2.只有文字3.只有图片 -->
      <div :class="IsHandShowType==3?'c-ph90 c-mt64 c-flex-row c-flexw-wrap c-justify-sb':'c-mt90 c-ph30'" v-if="answerShowType == 6 && (type == 1 || type == 2)&& (isQuestionEnd == 1||!answerShowFlag||examinationInfo.assetStatus == -1)">
        <div v-show="IsHandShowType==3" @click="clickOption(index)" class="c-ww200 c-mb40" v-for="(item, index) in opList" :key="index" v-if="!answerShowFlag||playAudioIndex >= index||examinationInfo.assetStatus == -1">
          <div class="c-p">
            <img class="c-w100 c-br10" :src="$addXossFilter(item.imgSrc, require('../../../assets/default3_5.png'))" alt="">
            <div v-if="item.status == 2" class="c-pa c-w100 c-h c-p-l0 c-p-t0 c-br10 c-bg-black right-bg c-flex-row c-flex-center"><span class="iconfont c-fc-white c-fs48 icon-duihao">&#xe82c;</span></div>
            <div v-if="item.status == 3" class="c-pa c-w100 c-h c-p-l0 c-p-t0 c-br10 c-bg-black wrong-bg c-flex-row c-flex-center"><span class="iconfont c-fc-white c-fs48">&#xe964;</span></div>
            <div v-if="item.status == 1" class="c-pa c-w100 c-h c-p-l0 c-p-t0 c-br10 c-bg-black choose-bg c-flex-row c-flex-center"></div>
          </div>
          <div class="c-fs26 c-fc-sblack c-textAlign-c c-mt16">{{opLetter[index]}}</div>
        </div>
        <div v-if="IsHandShowType==2">
          <div v-if="!answerShowFlag||playAudioIndex >= index||examinationInfo.assetStatus == -1" @click="clickOption(index)" v-for="(item, index) in opList" :key="index" :class="item.status == 0 ? 'stripe-none' : (item.status == 1 ? 'option-choose c-fc-white' : (item.status == 2 ? 'stripe-right' : 'stripe-wrong'))" class="c-flex-row c-aligni-baseline c-pv30 c-ph30 c-mb30 c-br10">
            <span class="c-fs28 c-flex-shrink0 c-mr40">{{opLetter[index]}}</span>
            <span class="c-fs28">{{item.text}}</span>
          </div>
        </div>
        <div v-if="IsHandShowType==1">
          <div v-if="!answerShowFlag||playAudioIndex >= index||examinationInfo.assetStatus == -1" @click="clickOption(index)" class="c-flex-row c-aligni-start c-pv30 c-ph30 c-mb30 c-br10 c-ww580 c-p" v-for="(item, index) in opList" :key="index" :class="item.status == 0 ? 'stripe-none' : (item.status == 1 ? 'option-choose c-fc-white' : (item.status == 2 ? 'stripe-right' : 'stripe-wrong'))">
            <span class="c-fs28 c-flex-shrink0 c-mr40">{{opLetter[index]}}</span>
            <div>
              <div>
                <img class="c-ww200 c-br10" :src="$addXossFilter(item.imgSrc, require('../../../assets/default3_5.png'))" alt="">
              </div>
              <div class="c-fs22 c-mt10">{{item.text}}</div>
              <div class="iconfont c-fc-white c-fs48 c-pa c-p-t32 c-p-r32" :class="item.status == 3 ?'icon-cuo':item.status == 2 ? 'icon-duihao':''"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-mt90 c-ph64" v-if="answerShowType == 4 && (type == 1 || type == 2)">
        <div @click="clickOption(index)" v-for="(item, index) in opList" :key="index" :class="item.status == 0 ? 'stripe-none' : (item.status == 1 ? 'option-choose c-fc-white' : (item.status == 2 ? 'stripe-right' : 'stripe-wrong'))" class="c-flex-row c-aligni-baseline c-pv30 c-ph30 c-mb30 c-br10">
          <span class="c-fs28 c-flex-shrink0 c-mr40">{{opLetter[index]}}</span>
          <span class="c-fs28">{{item.text}}</span>
        </div>
      </div>
      <div v-if="type == 2 && moreChooseFlag" @click="comfirm" class="c-fs28 c-fc-white c-hh72 c-ww240 c-flex-row c-flex-center c-br36 comfirm-btn c-mlr-auto c-mt40">确定</div>
      <div class="c-flex-row c-aligni-center c-justify-sb c-ph64 c-mt100" v-if="type == 6">
        <div class="c-ww80 c-hh80">
          <img @click="firstPlay" v-if="showFirstSpeak" class="c-ww80 c-hh80 c-brp50" :src="require('../../../assets/i/wap/exam/play.png')" alt="">
          <img @click="replay" v-if="!showLoudspeaker && !showFirstSpeak" class="c-ww80 c-hh80 c-brp50" :src="require('../../../assets/i/wap/exam/play.png')" alt="">
          <img v-if="showLoudspeaker && !showFirstSpeak" class="c-ww80 c-hh80 c-brp50" :src="require('../../../assets/i/wap/exam/loudspeaker.gif')" alt="">
        </div>
        <div @click="clickRecordBtn" :class="recordStatus == 'RECORDING' ? 'record_out' : ''" class="record-circle c-flex-row c-flex-center">
          <span v-if="recordStatus == 'RECORDING'" class="c-fs40 c-fc-white icon iconfont">&#xe8ae;</span>
          <span v-else class="c-fs40 c-fc-white icon iconfont">&#xe81f;</span>
        </div>
        <div :class="score === '' ? 'option-bg' : (Number(score) >= 85 ? 'stripe-right' : (Number(score) >= 60 ? 'test-bg c-fc-white' : 'stripe-wrong'))" class="c-ww80 c-hh80 c-brp50 c-flex-row c-flex-center c-fs36">{{score === '' ? '' : Number(score).toFixed(0)}}</div>
      </div>
      <div v-if="type == 6" class="c-fs20 c-fc-gray c-textAlign-c c-mt28 c-pb80">点击话筒，{{recordStatus == "RECORDING" ? "结束" : "开始"}}录音<span v-if="recordStatus == 'RECORDING'">(剩余{{60-recordTime}}秒)</span></div>
      <div v-if="paperType == 5 && isStudy == 2" class="btn-wrap c-flex-row c-justify-sb">
        <div v-if="curNum > 2 || (curNum == 2 && isOver == 1)" class="btn-next-question c-flex-grow1" @click="clickPrev">上一题</div>
        <div v-if="isOver == 1" class="btn-next-question c-flex-grow1 test-bg c-fc-white" @click="testNow">立即测试</div>
        <div v-else class="btn-next-question c-flex-grow1" @click="clickNext">下一题</div>
      </div>
      <open-modal :openModal='showPause'>
        <div class="pause-bg c-text-hidden">
          <div class="c-bg-white">
            <div @click="goOnTest" class="c-hh88 c-fs28 c-fc-sblack c-bd-b1-f6 c-flex-row c-flex-center c-mh24">继续</div>
            <div v-if="examinationInfo.paperInfo.enableResurvey != -1" @click="restart" class="c-hh88 c-fs28 c-fc-sblack c-flex-row c-flex-center">重测</div>
          </div>
          <div class="c-hh10 c-flex-row c-bg-f6"></div>
          <div @click="clickExit" class="c-fs28 c-fc-sblack c-hh88 c-bg-white c-flex-row c-flex-center">退出</div>
        </div>
      </open-modal>
    </div>
  </div>
</template>

<script>
import CountdownVoice from "@/components/templates/countdownVoice.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
//import ExaminationResult from "@/components/homePage/examination/examinationResult.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js"
import record from "@/utils/recorder.js";
import transWorker from '@/utils/transcode.worker.js'
import { Base64 } from '@/utils/base64js.js'
import parser from 'fast-xml-parser'
import watermark from "@/components/templates/common/watermark.vue";
let recordTimeCon; //录音计时控制器
let currentLocalId; //当前录音ID
// let recorder = null;
let texts = ['optionA', 'optionB', 'optionC', 'optionD', 'optionE', 'optionF']
let audioSrcs = ['audioA', 'audioB', 'audioC', 'audioD', 'audioE', 'audioF'];
let imgSrcs = ['avatarA', 'avatarB', 'avatarC', 'avatarD', 'avatarE', 'avatarF'];
let isLoading = false;
let playAudioIndexCount = null;
let mp3Url = '';
let aswerControl;
let curanswerTime = 0;
export default {
  name: "VoiceTestAnswers",
  components: {
    CountdownVoice,
    OpenModal,
    watermark
    //  ExaminationResult
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      paperMainId: -1,
      examinationInfo: null,
      showStart: true,
      opLetter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      opList: [],
      showPause: false, //暂停弹窗
      curNum: 1, //当前题目
      problemShowType: -1, //题目类型  1:语音播放（不显示朗读内容）  2：显示内容（无语音） 3：语音播放+内容显示
      answerShowType: -1, //选项类型  1:语音播放（不显示朗读内容） 4: 只有文字，没有图片 5:有图片+文字 7只有图片 6自行上传
      playAudioIndex: -1, //播放索引 -1：播放题目 0：播放第一个选项 1：播放第二个选项。。。
      IsHandShowType: -1, //自行上传选项类型  1://有文字,存在图片2.只有文字3.只有图片
      isHandAudio: -1,
      playAudioSrc: '', //当前播放的地址
      userAnSwer: [],
      rightAnswer: '',
      isOver: 0,
      paperDetailId: -1,
      examId: -1,
      recordStatus: "START",
      recordTime: 0,
      speakType: -1, //1:中文 2：英文
      type: -1, //1：单选 2：多选 6：朗读
      score: '', //朗读题得分
      hasChoosed: 0, //是否已经选择答案 0：未选择 1：已选择
      hasRecord: 0, //是否已经录音 0：未录音 1：已录音
      isQuestionEnd: 0, //题目是否已经念完 0:未念完 1：已念完
      showLoudspeaker: true,
      showFirstSpeak: true, //之前是一进入页面就开始读题目，后来微信禁止这种行为后，需要点击按钮才开始播放
      examModel: 1, //1：考试模式 2：练习模式
      paperType: 4, //4: 语言试卷 5:朗读课程
      isStudy: 1, //1、考试模式 2 学习模式
      wordAnly: "",
      praticeTimes: 0,
      isReject: 0,
      showIllustration: true,
      isWeiXin: true,
      qiniuInfo: {}, //录音完后的音频上传到七牛，这里是七牛的相关信息
      blob: '', //录音之后要上传七牛的音频文件
      answerShowFlag: false, //有音频则播放才显示
      moreChooseFlag: false,
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
      audioData: [],
      leftDataList: [],
      rightDataList: [],
      answeraudio: '',
      recordFlag: true,
      answerTime: "00:00:00",
      showExamWatermark: false,
      examWatermarkConfig: JSON.parse(localStorage.getItem("examWatermarkConfig")) || ''
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {
    setDocumentTitle("答题");// eslint-disable-line
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
    this.isWeiXin = utilJs.isWeiXin();
    curanswerTime = 0;
    this.paperMainId = this.$route.query.paperMainId;
    this.isStudy = this.$route.query.isStudy ? 2 : 1;
    this.showPause = false;
    this.curNum = this.$route.query.goOnNum;
    this.examinationInfo = null;
    this.showStart = true;
    this.recordStatus = "START";
    this.opList = [];
    this.moreChooseFlag = false
    this.praticeTimes = 0;
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    this.showExamWatermark = localStorage.getItem('enableExamWatermark') && localStorage.getItem('enableExamWatermark') == '1' ? true : false;
    if (this.curNum != 1) {
      this.showStart = false;
      this.getQuestion();
    } else {
      this.transit();
    }
    // setTimeout(() => {
    //   recorder = new TencentSOE({ // eslint-disable-line
    //     SecretId: 'AKIDpkV7TT9CyUmjY6tYYCbkf4EIIyZ384b5',
    //     SecretKey: 'TqVu50fKpTAe0vcEbjcIjxu0yjEUatdl',
    //     MediaUrl: 'https://kpapi-cs.ckjr001.com/api/common/downWxMediaSpx2',
    //     success() {
    //       // recorder.start({ RefText: 'about' });
    //     },
    //     error(err) {
    //       console.log(err);
    //     }
    //   });
    // }, 5000);
    clearInterval(recordTimeCon);
    this.recordCheck()
    this.isWeiXin = utilJs.isWeiXin();
    if (!utilJs.isWeiXin() || this.recordFlag) {
      utilJs.getMethod(global.apiurl + "common/qiniu/uploadToken", res => {
        this.qiniuInfo.qiNiuToken = res;
      });
    }
    this.wechatShare();
  },
  deactivated() {
    // this.progress = Math.round((this.examinationInfo.number / this.examinationInfo.wholeNum) * 100);
    if (!this.isWeiXin && record != null) {
      record.recClose();
    }
    this.setProgress();
  },
  mounted() {
  },
  methods: {
    aswerTimeControl() {
      //答题时间计时器
      let that = this;
      aswerControl = setInterval(function () {
        curanswerTime++;
        that.answerTime = that.timeToStr(curanswerTime);
      }, 1000);
    },
    goOnTest() {
      this.showPause = false;
      if (document.getElementById('audio').ended && this.answerShowType == 1 &&
      this.type != 6 && this.playAudioIndex < this.opList.length) {
        this.playAudioIndex++;
        this.playRadio();
      } else if (!document.getElementById('audio').ended) {
        if (document.getElementById("audio").src != '') {
          document.getElementById("audio").play();
        }
      }
      this.aswerTimeControl();
    },
    clickExit() {
      //点击退出测试
      this.showPause = false;
      clearInterval(aswerControl);
      clearTimeout(playAudioIndexCount);
      this.$router.go(-1);
    },
    restart() {
      let $this = this;
      this.showPause = false;
      $this.progress = 0;
      this.answerTime = "00:00:00";
      curanswerTime = 0;
      $this.setProgress();
      clearInterval(aswerControl);
      utilJs.getMethod(global.apiurl + 'exam/transit/' + this.paperMainId + '?topicId=0', function (res) {
        $this.curNum = 1;
        $this.showStart = true
      })
    },
    clickPrev() {
      if (this.isOver == 1) {
        this.curNum = this.curNum - 1;
      } else {
        this.curNum = this.curNum - 2;
      }
      this.isOver = 0;
      clearInterval(aswerControl);
      this.getQuestion();
    },
    clickNext() {
      clearInterval(aswerControl);
      this.getQuestion();
    },
    testNow() {
      let $this = this;
      // this.examModel = 1;
      this.isStudy = 1;
      utilJs.getMethod(global.apiurl + 'exam/transit/' + this.paperMainId + '?topicId=0', function (res) {
        $this.curNum = 1;
        $this.showStart = true
        // $this.getQuestion();
      });
    },
    clickRecordBtn() {
      if (this.recordStatus != "RECORDING") {
        this.clickStartRecord();
      } else {
        this.clickStopRecord();
      }
    },
    // 暂停录音
    recorderStop(state) {
      // if (state == 1) {
      //   this.$showCjToast({
      //     text: "webSocket连接失败",
      //     type: "warn",
      //     time: 1000
      //   });
      // }
    // safari下suspend后再次resume录音内容将是空白，设置safari下不做suspend
      if (!(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgen))) {
        this.audioContext && this.audioContext.suspend()
      }
      this.setStatus('START')
    },
    //检测是否可以录音
    recordCheck() {
      // let $this = this
      this.audioData = []
      // $this.audioData.push(...transWorker.onmessage())
      navigator.getUserMedia =
      navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia

    // 创建音频环境
      try {
        this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
        this.audioContext.resume()
        if (!this.audioContext) {
          this.recordFlag = false
          return
        }
      } catch (e) {
        if (!this.audioContext) {
          this.recordFlag = false
          return
        }
      }

    // 获取浏览器录音权限
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        this.recordFlag = true
      } else if (navigator.getUserMedia) {
        this.recordFlag = true
      } else {
        this.recordFlag = false
      }
    },
    // 初始化浏览器录音
    recorderInit() {
      // let $this = this
      this.audioData = []
      // $this.audioData.push(...transWorker.onmessage())
      navigator.getUserMedia =
      navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia

    // 创建音频环境
      try {
        this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
        this.audioContext.resume()
        if (!this.audioContext) {
          this.$showCjToast({
            text: "浏览器不支持webAudioApi相关接口",
            type: "warn",
            time: 1000
          });
          return
        }
      } catch (e) {
        if (!this.audioContext) {
          this.$showCjToast({
            text: "浏览器不支持webAudioApi相关接口",
            type: "warn",
            time: 1000
          });
          return
        }
      }

    // 获取浏览器录音权限
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices
        .getUserMedia({
          audio: {sampleRate:48000, autoGainControl:false},
          video: false,
        })
        .then(stream => {
          getMediaSuccess(stream)
        })
        .catch(e => {
          getMediaFail(e)
        })
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(
          {
            audio: true,
            video: false,
          },
        stream => {
          getMediaSuccess(stream)
        },
        function (e) {
          getMediaFail(e)
        }
      )
      } else {
        if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
          this.$showCjToast({
            text: "chrome下获取浏览器录音功能，因为安全性问题，需要在localhost或127.0.0.1或https下才能获取权限",
            type: "warn",
            time: 1000
          });
        } else {
          this.$showCjToast({
            text: "无法获取浏览器录音功能，请升级浏览器或使用chrome",
            type: "warn",
            time: 1000
          });
        }
        this.audioContext && this.audioContext.close()
        return
      }
    // 获取浏览器录音权限成功的回调
      this.scriptProcessor = []
      this.mediaSource = []
      this.scriptProcessor = []
      let getMediaSuccess = stream => {
        recordTimeCon = setInterval(() => {
          if (this.recordTime < 60) {
            this.recordTime++;
          } else {
            this.clickStopRecord();
          }
        }, 1000);
      // 创建一个用于通过JavaScript直接处理音频
        this.scriptProcessor = this.audioContext.createScriptProcessor(4096, 2, 2)
        this.scriptProcessor.onaudioprocess = e => {
        // 去处理音频数据
          if (this.recordStatus === 'RECORDING') {
            this.audioData = transWorker.onmessage(e.inputBuffer.getChannelData(0))
          }
          let leftChannelData = e.inputBuffer.getChannelData(0)
          let rightChannelData = e.inputBuffer.getChannelData(1)
            // 需要克隆一下
          this.leftDataList.push(leftChannelData.slice(0))
          this.rightDataList.push(rightChannelData.slice(0))
        }
      // 创建一个新的MediaStreamAudioSourceNode 对象，使来自MediaStream的音频可以被播放和操作
        this.mediaSource = this.audioContext.createMediaStreamSource(stream)
      // 连接
        this.mediaSource.connect(this.scriptProcessor)
        this.scriptProcessor.connect(this.audioContext.destination)
        this.connectWebSocket()
      }

      let getMediaFail = (e) => {
        this.$showCjToast({
          text: "请求麦克风失败",
          type: "warn",
          time: 1000
        });
        this.audioContext && this.audioContext.close()
        this.audioContext = undefined
      // 关闭websocket
        if (this.webSocket && this.webSocket.readyState === 1) {
          this.webSocket.close()
        }
      }
    },
    //点击开始录音
    clickStartRecord() {
      if (this.recordStatus != "START" || this.hasRecord == 1) {
        return;
      }
      if (this.isQuestionEnd == 0 && this.examinationInfo.assetStatus == 1) { //念完题目才能开始录音
        return;
      }
      this.hasRecord = 1;
      this.wordAnly = '';
      this.isReject = 0;
      this.score = '';
      this.audioData = []
      this.leftDataList = [];
      this.rightDataList = []
      // this.stopListenAudio();
      this.recordStatus = "RECORDING";
      this.recordTime = 0;
      clearInterval(recordTimeCon);
      let $this = this;
      if (this.recordFlag) {
        $this.recorderInit()
      } else {
        if (this.isWeiXin) {
          wxUtilJs.startRecord().then(res => {
            recordTimeCon = setInterval(() => {
              if ($this.recordTime < 60) {
                $this.recordTime++;
              } else {
                $this.clickStopRecord();
              }
            }, 1000);
          }, failRes => {
            this.$showCjToast({
              text: "开启录音失败,请确认是否授权录音",
              type: "warn",
              time: 1000
            });
            this.recordStatus = "START";
            this.hasRecord = 0;
          });

        //60s后自动停止录音
          wxUtilJs.onVoiceRecordEnd().then(localId => {
            currentLocalId = localId;
            this.clickSentRecord();
          });
        } else {
          record.recOpen(() => {
            record.recStart();
            recordTimeCon = setInterval(() => {
              if ($this.recordTime < 60) {
                $this.recordTime++;
              } else {
                $this.clickStopRecord();
              }
            }, 1000);
            record.recVoiceRecordEnd(res => {
              this.blob = res;
              this.clickSentRecord();
            });
          }, () => {
            this.recordStatus = "START";
            this.hasRecord = 0;
          }, 'wav');
        }
      }
    },
    mergeArray(list) {
      let length = list.length * list[0].length;
      let data = new Float32Array(length)
      let offset = 0;
      for (let i = 0; i < list.length; i++) {
        data.set(list[i], offset);
        offset += list[i].length;
      }
      return data;
    },
    interleaveLeftAndRight(left, right) {
      let totalLength = left.length + right.length;
      let data = new Float32Array(totalLength);
      for (let i = 0; i < left.length; i++) {
        let k = i * 2;
        data[k] = left[i];
        data[k + 1] = right[i];
      }
      return data;
    },
    writeUTFBytes(view, offset, string) {
      let lng = string.length;
      for (let i = 0; i < lng; i++) {
        view.setUint8(offset + i, string.charCodeAt(i));
      }
    },
    //点击停止录音
    clickStopRecord() {
      if (this.recordStatus != "RECORDING") {
        return;
      }
      clearInterval(recordTimeCon);
      // 停止录音
      if (this.recordFlag) {
        this.audioContext && this.audioContext.close()
        if (this.recordTime >= 1) {
          this.setStatus("START");
        }
      } else {
        if (this.isWeiXin) {
          wxUtilJs.stopRecord().then(localId => {
            currentLocalId = localId;
            if (this.recordTime >= 1) {
              this.setStatus("START");
              this.clickSentRecord();
            }
          });
        } else {
          record.recStop(res => {
            this.blob = res;
            if (this.recordTime >= 1) {
              this.clickSentRecord();
            }
          });
        }
      }
      if (this.recordTime < 1) {
        this.$showCjToast({
          text: "录音时间太短",
          type: "warn",
          time: 1000
        });
        this.setStatus("START");
        this.hasRecord = 0;
      }
      // record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
      //   this.recordStatus = "START";
      //   mp3Url = sres
      //   // this.getPoints(sres);
      // }, () => {});
    },
    createWavFile(audioData) {
      const WAV_HEAD_SIZE = 44;
      let buffer = new ArrayBuffer(audioData.length * 2 + WAV_HEAD_SIZE)
          // 需要用一个view来操控buffer
      let view = new DataView(buffer);
      // 写入wav头部信息
      // RIFF chunk descriptor/identifier
      this.writeUTFBytes(view, 0, 'RIFF');
      // RIFF chunk length
      view.setUint32(4, 44 + audioData.length * 2, true);
      // RIFF type
      this.writeUTFBytes(view, 8, 'WAVE');
      // format chunk identifier
      // FMT sub-chunk
      this.writeUTFBytes(view, 12, 'fmt ');
      // format chunk length
      view.setUint32(16, 16, true);
      // sample format (raw)
      view.setUint16(20, 1, true);
      // stereo (2 channels)
      view.setUint16(22, 2, true);
      // sample rate
      view.setUint32(24, 44100, true);
      // byte rate (sample rate * block align)
      view.setUint32(28, 44100 * 2, true);
      // block align (channel count * bytes per sample)
      view.setUint16(32, 2 * 2, true);
      // bits per sample
      view.setUint16(34, 16, true);
      // data sub-chunk
      // data chunk identifier
      this.writeUTFBytes(view, 36, 'data');
      // data chunk length
      view.setUint32(40, audioData.length * 2, true);
      // 写入PCM数据
      let length = audioData.length;
      let index = 44;
      let volume = 1;
      for (let i = 0; i < length; i++) {
        view.setInt16(index, audioData[i] * (0x7FFF * volume), true);
        index += 2;
      }
      return buffer;
    },
    // 修改录音评测状态
    setStatus(recordStatus) {
      this.recordStatus = recordStatus
    },
    // 连接websocket
    connectWebSocket() {
      utilJs.postMethod(
        global.apiurl + "speech/changeAudio",
        {},
        res => {
          let iseWS
          if ('WebSocket' in window) {
            iseWS = new WebSocket(res.xfUrl)
          }
          this.webSocket = iseWS
          this.setStatus('RECORDING')
          iseWS.onopen = e => {
            console.log(e)
            this.setStatus('RECORDING')
        // 重新开始录音
            setTimeout(() => {
              this.webSocketSend()
            }, 500)
          }
          iseWS.onmessage = e => {
            console.log(e)
            this.result(e.data)
          }
          iseWS.onerror = e => {
            console.log(e)
            this.result(e.data, 1)
            this.recorderStop(1)
          }
          iseWS.onclose = e => {
            this.recorderStop()
          }
        })
    },
    // 向webSocket发送数据
    webSocketSend() {
      if (this.webSocket.readyState !== 1) {
        return
      }
      let audioData = this.audioData.splice(0, 1280)
      let host = window.location.host;
      var params = {
        common: {
          app_id: host == "kptest.ckjr001.com" || host == "kptest2.ckjr001.com" ? '5ce4a5a3' : '5d0c50e5',
        },
        business: {
          category: 'read_sentence', // read_syllable/单字朗读，汉语专有 read_word/词语朗读  read_sentence/句子朗读 https://www.xfyun.cn/doc/Ise/IseAPI.html#%E6%8E%A5%E5%8F%A3%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B
          rstcd: 'utf8',
          // group: this.examinationInfo.crowdType == 1 ? 'adult' : this.examinationInfo.crowdType == 2 ? 'youth' : 'pupil',
          sub: 'ise',
          ent: this.speakType == 1 ? 'cn_vip' : 'en_vip',
          tte: 'utf-8',
          cmd: 'ssb',
          auf: 'audio/L16;rate=16000',
          aus: 1,
          aue: 'raw',
          rst: 'entirety',
          ise_unite: "1",
          extra_ability: 'multi_dimension',
          text: '\uFEFF' + this.examinationInfo.problem
        },
        data: {
          status: 0,
          encoding: 'raw',
          data_type: 1,
          data: this.toBase64(audioData),
        },
      }
      if (this.speakType == 1) {
        params.business.group = this.examinationInfo.crowdType == 1 ? 'adult' : this.examinationInfo.crowdType == 2 ? 'youth' : 'pupil'
        params.business.check_type = this.examinationInfo.difficultType == 2 ? 'common' : this.examinationInfo.difficultType == 3 ? 'hard' : 'easy'
      }
      this.webSocket.send(JSON.stringify(params))
      this.handlerInterval = setInterval(() => {
      // websocket未连接
        if (this.webSocket.readyState !== 1) {
          this.audioData = []
          clearInterval(this.handlerInterval)
          return
        }
      // 最后一帧
        if (this.audioData.length === 0) {
          if (this.recordStatus == "START") {
            this.webSocket.send(
            JSON.stringify({
              business: {
                cmd: 'auw',
                aus: 4,
                aue: 'raw'
              },
              data: {
                status: 2,
                encoding: 'raw',
                data_type: 1,
                data: '',
              },
            })
          )
            this.audioData = []
            this.$loading.show({
              text: "计算分数中..."
            });
            clearInterval(this.handlerInterval)
          }
          return false
        }
        audioData = this.audioData.splice(0, 1280)
      // 中间帧
        this.webSocket.send(
        JSON.stringify({
          business: {
            cmd: 'auw',
            aus: 2,
            aue: 'raw'
          },
          data: {
            status: 1,
            encoding: 'raw',
            data_type: 1,
            data: this.toBase64(audioData),
          },
        })
      )
      }, 40)
    },
    // 对处理后的音频数据进行base64编码
    toBase64(buffer) {
      let binary = ''
      let bytes = new Uint8Array(buffer)
      let len = bytes.byteLength
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },
    result(resultData, falg) {
    // 识别结束
    if (falg == 1) {
        let leftData = this.mergeArray(this.leftDataList)
        let rightData = this.mergeArray(this.rightDataList)
        let audioData = this.interleaveLeftAndRight(leftData, rightData)
        let wavBuffer = this.createWavFile(audioData)
        this.blob = new Blob([new Uint8Array(wavBuffer)], {'type': 'audio/wav'});
        // let blobUrl = URL.createObjectURL(this.blob);
        this.leftDataList = [];
        this.rightDataList = [];
        record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
          this.recordStatus = "START";
          // https://qnoss.ckjr001.com/1609986768842_mp_voice_v8g4534.wav
          mp3Url = sres;
          this.getPoints(sres, falg);
        }, () => {});
    } else {
      let jsonData = JSON.parse(resultData)
      if (jsonData.code !== 0) {
        this.isReject = 1
        this.hasRecord = 0;
        this.$loading.hide();
        if (this.isReject == 1) {
          this.$showCjToast({
            text: "请根据题目进行朗读" + jsonData.code,
            type: "warn",
            time: 1500
          });
        }
        this.recordStatus = "START";
        this.webSocket.close()
      } else {
        if (jsonData.data && jsonData.data.data) {
          let data = Base64.decode(jsonData.data.data)
          let grade = parser.parse(data, {
            attributeNamePrefix: '',
            ignoreAttributes: false
          })
          this.hasRecord = 0;
          this.isReject = 0;
          //音频流的合并并生成播放链接
          let leftData = this.mergeArray(this.leftDataList)
          let rightData = this.mergeArray(this.rightDataList)
          let audioData = this.interleaveLeftAndRight(leftData, rightData)
          let wavBuffer = this.createWavFile(audioData)
          this.blob = new Blob([new Uint8Array(wavBuffer)], {'type': 'audio/wav'});
          // let blobUrl = URL.createObjectURL(this.blob);
          this.leftDataList = [];
          this.rightDataList = [];
          record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
            this.recordStatus = "START";
            // https://qnoss.ckjr001.com/1609986768842_mp_voice_v8g4534.wav
            mp3Url = sres;
            this.setResultText(grade)
            // this.getPoints(sres);
          }, () => {});
        }
        if (jsonData.code === 0 && jsonData.data.status === 2) {
          this.webSocket.close()
        }
      }
      }
    },
    //点击重录
    clickRecordAgain() {
      this.recordStatus = "START";
    },
    //点击试听
    clickTryListen() {
      if (!this.isWeiXin) {
        return;
      }
      this.isPlayTest = true;
      wxUtilJs.playVoice({
        localId: currentLocalId
      });
    },
    //点击发送
    clickSentRecord() {
      this.$loading.show({
        text: "计算分数中..."
      });
      this.stopListenAudio();
      // this.$emit("closeAudioRecordModal");
      if (this.isWeiXin) {
        wxUtilJs.uploadVoice({
          localId: currentLocalId
        }).then(serverId => {
          this.recordStatus = "START";
          this.getPoints(serverId);
        });
      } else {
        record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
          this.recordStatus = "START";
          this.getPoints(sres);
        }, () => {});
      }
    },

    //上传音频
    syncUploadAudio(serverId) {
      utilJs.postMethod(
        global.apiurl + "common/downWxMediaSpx",
        {
          content: serverId
        },
        res => {
          mp3Url = res.mp3Url;
          this.getPoints(res.wavUrl);
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    setResultText(grade) {
      let $this = this;
      $this.$loading.hide();
      const readSentence = grade.xml_result.read_sentence.rec_paper
      if ($this.speakType == 1) {
        this.score = readSentence.read_sentence.total_score;
      } else {
        this.score = readSentence.read_chapter.total_score
        if (Array.isArray(readSentence.read_chapter.sentence)) {
          for (let i = 0; i < readSentence.read_chapter.sentence.length; i++) {
            if (Array.isArray(readSentence.read_chapter.sentence[i].word)) {
              for (let j = 0; j < readSentence.read_chapter.sentence[i].word.length; j++) {
                if (readSentence.read_chapter.sentence[i].word[j].total_score) {
                  if (Number(readSentence.read_chapter.sentence[i].word[j].total_score) >= 85) {
                    $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + readSentence.read_chapter.sentence[i].word[j].content + '</span>';
                  } else if (Number(readSentence.read_chapter.sentence[i].word[j].total_score) >= 60) {
                    $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + readSentence.read_chapter.sentence[i].word[j].content + '</span>';
                  } else {
                    $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + readSentence.read_chapter.sentence[i].word[j].content + '</span>';
                  }
                  if (j != readSentence.read_chapter.sentence[i].word.length - 1) {
                    $this.wordAnly = $this.wordAnly + ' ';
                  }
                }
              }
            } else {
              if (readSentence.read_chapter.sentence[i].word.total_score) {
                if (Number(readSentence.read_chapter.sentence[i].word.total_score) >= 85) {
                  $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + readSentence.read_chapter.sentence[i].word.content + '</span>';
                } else if (Number(readSentence.read_chapter.sentence[i].word.total_score) >= 60) {
                  $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + readSentence.read_chapter.sentence[i].word.content + '</span>';
                } else {
                  $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + readSentence.read_chapter.sentence[i].word.content + '</span>';
                }
              }
            }
            $this.wordAnly = $this.wordAnly + '.';
          }
        } else {
          if (Array.isArray(readSentence.read_chapter.sentence.word)) {
            for (let i = 0; i < readSentence.read_chapter.sentence.word.length; i++) {
              if (readSentence.read_chapter.sentence.word[i].total_score) {
                if (Number(readSentence.read_chapter.sentence.word[i].total_score) >= 85) {
                  $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + readSentence.read_chapter.sentence.word[i].content + '</span>';
                } else if (Number(readSentence.read_chapter.sentence.word[i].total_score) >= 60) {
                  $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + readSentence.read_chapter.sentence.word[i].content + '</span>';
                } else {
                  $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + readSentence.read_chapter.sentence.word[i].content + '</span>';
                }
                if (i != readSentence.read_chapter.sentence.word.length - 1) {
                  $this.wordAnly = $this.wordAnly + ' ';
                }
              }
            }
          } else {
            if (readSentence.read_chapter.sentence.word.total_score) {
              if (Number(readSentence.read_chapter.sentence.word.total_score) >= 85) {
                $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + readSentence.read_chapter.sentence.word.content + '</span>';
              } else if (Number(readSentence.read_chapter.sentence.word.total_score) >= 60) {
                $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + readSentence.read_chapter.sentence.word.content + '</span>';
              } else {
                $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + readSentence.read_chapter.sentence.word.content + '</span>';
              }
            }
          }
          $this.wordAnly = $this.wordAnly + '.';
        }
      }
      if ($this.paperType == 5 && $this.isStudy == 2) { //学习模式下可以测任意次，不直接跳转下一题
        $this.hasRecord = 0;
        if ($this.isReject == 1) {
          $this.$showCjToast({
            text: "请根据题目进行朗读",
            type: "warn",
            time: 1500
          });
        }
      } else if ($this.paperType == 4 && $this.examModel == 2) {
        $this.praticeTimes++
        if ($this.praticeTimes > 1 || Number($this.score) > 70) { //练习模式下得分不超过70,需要多测试一次
          setTimeout(() => {
            $this.praticeTimes = 0;
            $this.goNextQuestion();
          }, 2000);
        } else {
          $this.hasRecord = 0;
          $this.recordStatus = "START";
          $this.$showCjToast({
            text: "未超过70分，再测试一次吧",
            type: "warn",
            time: 1500
          });
        }
      } else {
        setTimeout(() => {
          $this.goNextQuestion();
        }, 3500);
      }
    },
    getPoints(serverId, falg) {
      let $this = this;
      utilJs.postMethod(
        global.apiurl + "speech/speakPractice",
        {
          text: $this.examinationInfo.problem,
          speakType: $this.speakType,
          content: serverId,
          errorFlag:falg
        },
        res => {
          $this.score = res.score;
          $this.isReject = res.isReject;
          mp3Url = res.mp3Url;
          $this.$loading.hide();
          if ($this.problemShowType == 3 && $this.speakType == 2 && res.wordAnalysis) {
            if (!Array.isArray(res.wordAnalysis)) {
              if (Array.isArray(res.wordAnalysis.word)) {
                for (let i = 0; i < res.wordAnalysis.word.length; i++) {
                  if (res.wordAnalysis.word[i].total_score) {
                    if (Number(res.wordAnalysis.word[i].total_score) >= 85) {
                      if (i != res.wordAnalysis.word.length - 1) {
                        $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + res.wordAnalysis.word[i].content + '</span> ';
                      } else {
                        $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + res.wordAnalysis.word[i].content + '</span>';
                      }
                    } else if (Number(res.wordAnalysis.word[i].total_score) >= 60) {
                      if (i != res.wordAnalysis.word.length - 1) {
                        $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + res.wordAnalysis.word[i].content + '</span> ';
                      } else {
                        $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + res.wordAnalysis.word[i].content + '</span>';
                      }
                    } else {
                      if (i != res.wordAnalysis.word.length - 1) {
                        $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + res.wordAnalysis.word[i].content + '</span> ';
                      } else {
                        $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + res.wordAnalysis.word[i].content + '</span>';
                      }
                    }
                    if (i != res.wordAnalysis.word.length - 1) {
                      $this.wordAnly = $this.wordAnly + ' ';
                    }
                  }
                }
              } else {
                if (res.wordAnalysis.word.total_score) {
                  if (Number(res.wordAnalysis.word.total_score) >= 85) {
                    $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + res.wordAnalysis.word.content + '</span>';
                  } else if (Number(res.wordAnalysis.word.total_score) >= 60) {
                    $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + res.wordAnalysis.word.content + '</span>';
                  } else {
                    $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + res.wordAnalysis.word.content + '</span>';
                  }
                }
              }
              $this.wordAnly = $this.wordAnly + '.';
            } else {
              for (let i = 0; i < res.wordAnalysis.length; i++) {
                if (Array.isArray(res.wordAnalysis[i].word)) {
                  for (let j = 0; j < res.wordAnalysis[i].word.length; j++) {
                    if (res.wordAnalysis[i].word[j].total_score) {
                      if (Number(res.wordAnalysis[i].word[j].total_score) >= 85) {
                        if (j != res.wordAnalysis[i].word.length - 1) {
                          $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + res.wordAnalysis[i].word[j].content + '</span> ';
                        } else {
                          $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + res.wordAnalysis[i].word[j].content + '</span>';
                        }
                      } else if (Number(res.wordAnalysis[i].word[j].total_score) >= 60) {
                        if (j != res.wordAnalysis[i].word.length - 1) {
                          $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + res.wordAnalysis[i].word[j].content + '</span> ';
                        } else {
                          $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + res.wordAnalysis[i].word[j].content + '</span>';
                        }
                      } else {
                        if (j != res.wordAnalysis[i].word.length - 1) {
                          $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + res.wordAnalysis[i].word[j].content + '</span> ';
                        } else {
                          $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + res.wordAnalysis[i].word[j].content + '</span>';
                        }
                      }
                      if (j != res.wordAnalysis[i].word.length - 1) {
                        $this.wordAnly = $this.wordAnly + ' ';
                      }
                    }
                  }
                } else {
                  if (res.wordAnalysis[i].word.total_score) {
                    if (Number(res.wordAnalysis[i].word.total_score) >= 85) {
                      $this.wordAnly = $this.wordAnly + "<span style='color:#71DB78'>" + res.wordAnalysis[i].word.content + '</span>';
                    } else if (Number(res.wordAnalysis[i].word.total_score) >= 60) {
                      $this.wordAnly = $this.wordAnly + "<span style='color:#666666'>" + res.wordAnalysis[i].word.content + '</span>';
                    } else {
                      $this.wordAnly = $this.wordAnly + "<span style='color:#FB816D'>" + res.wordAnalysis[i].word.content + '</span>';
                    }
                  }
                }
                $this.wordAnly = $this.wordAnly + '.';
              }
            }
          }
          if ($this.paperType == 5 && $this.isStudy == 2) { //学习模式下可以测任意次，不直接跳转下一题
            $this.hasRecord = 0;
            if ($this.isReject == 1) {
              $this.$showCjToast({
                text: "请根据题目进行朗读",
                type: "warn",
                time: 1500
              });
            }
          } else if ($this.paperType == 4 && $this.examModel == 2) {
            $this.praticeTimes++
            if ($this.praticeTimes > 1 || Number($this.score) > 70) { //练习模式下得分不超过70,需要多测试一次
              setTimeout(() => {
                $this.praticeTimes = 0;
                $this.goNextQuestion();
              }, 2000);
            } else {
              $this.hasRecord = 0;
              $this.recordStatus = "START";
              $this.$showCjToast({
                text: "未超过70分，再测试一次吧",
                type: "warn",
                time: 1500
              });
            }
          } else {
            setTimeout(() => {
              $this.goNextQuestion();
            }, 3500);
          }
        },
        failRes => {
          $this.hasRecord = 0;
          $this.recordStatus = "START";
          $this.$loading.hide();
        }
      );
    },

    //停止试听
    stopListenAudio() {
      if (this.isPlayTest) {
        this.isPlayTest = false;
        wxUtilJs.stopVoice({
          localId: currentLocalId
        });
      }
    },

    transit() { //考试之前需要先访问这个接口
      utilJs.getMethod(global.apiurl + 'exam/transit/' + this.paperMainId + '?topicId=0', function (res) {
      });
    },
    firstPlay() {
      if (this.examinationInfo.assetStatus == -1) {
        this.$showCjToast({
          text: "该音频已被管理员删除，如有疑问请咨询客服",
          type: "warn",
          time: 1500
        });
        return
      }
      this.showFirstSpeak = false;
      this.playRadio();
    },
    replay() {
      // this.audioContext && this.audioContext.close()
      if (this.examinationInfo.assetStatus == -1) {
        this.$showCjToast({
          text: "该音频已被管理员删除，如有疑问请咨询客服",
          type: "warn",
          time: 1500
        });
        return
      }
      if (this.examModel == 2 && ((this.isStudy == 2 && this.paperType == 5) || this.paperType == 4) && this.recordStatus != "RECORDING") {
        clearTimeout(playAudioIndexCount);
        this.playAudioIndex = -1;
        this.showLoudspeaker = true;
        this.playRadio();
      }
    },
    playRadio() {
      let audio = document.getElementById("audio");
      audio.src = '';
      if ((this.answerShowType != 6 && this.answerShowType != 1) || this.type == 6) {
        if (this.examinationInfo.audioProblem) {
          audio.src = this.examinationInfo.audioProblem;
          if (this.isWeiXin) {
            try {
              document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  document.getElementById("audio").play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                document.getElementById("audio").play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
            } catch (error) {
              // continue regardless of error
            }
          } else {
            audio.load();
            audio.play();
          }
        }
      } else {
        if (this.playAudioIndex == -1) {
          if (this.examinationInfo.audioProblem) {
            audio.src = this.examinationInfo.audioProblem;
            if (this.opList[0].audioSrc) {
              document.querySelector('#nextAudio').src = this.opList[0].audioSrc;
            }
          }
        } else {
          if (this.opList[this.playAudioIndex] && this.opList[this.playAudioIndex].audioSrc && this.opList[this.playAudioIndex].audioSrc != '') {
            audio.src = this.opList[this.playAudioIndex].audioSrc;
            if (this.opList[this.playAudioIndex + 1] && this.opList[this.playAudioIndex + 1].audioSrc) {
              document.querySelector('#nextAudio').src = this.opList[this.playAudioIndex + 1].audioSrc;
            }
          }
        }
        if (audio.src && audio.src != '') {
          if (this.isWeiXin) {
            try {
              document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  audio.play();
                },
                false
              );
              WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
                // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
                audio.play();
                console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
              });
            } catch (error) {
              // continue regardless of error
            }
          } else {
            audio.play();
          }
        }
      }
    },
    playAudioEnd() {
      let $this = this;
      // this.playAudioIndex ++;
      if (this.playAudioIndex == -1) {
        this.showLoudspeaker = false;
      }
      if ((this.answerShowType == 1 || this.answerShowType == 6) && (this.type == 1 || this.type == 2)) {
        playAudioIndexCount = setTimeout(function () {
          $this.playAudioIndex++;
          $this.playRadio();
        }, 2000)
      }
      // if (this.type == 6) {
      this.isQuestionEnd = 1;
      // }
    },
    playAudioError() {

    },
    comfirm() {
      let $this = this;
      if (this.userAnSwer.length == 0) {
        this.$showCjToast({
          text: "请选择答案",
          type: "warn",
          time: 1000
        });
        return;
      }
      this.hasChoosed = 1;
      this.showUserAnswer();
      if (this.examModel == 1) {
        setTimeout(() => {
          $this.goNextQuestion();
        }, 500);
      } else if (this.examModel == 2) {
        setTimeout(() => {
          $this.showRightAnswer();
        }, 1000);
        setTimeout(() => {
          $this.goNextQuestion();
        }, 1500);
      }
    },
    clickOption(answerIndex) {
      let $this = this;
      if (this.hasChoosed == 1) {
        return;
      }
      if (this.examinationInfo.type == 1) {
        this.hasChoosed = 1;
        this.userAnSwer.push(answerIndex);
        this.showUserAnswer();
        if (this.examModel == 1) {
          setTimeout(() => {
            $this.goNextQuestion();
          }, 500);
        } else if (this.examModel == 2) {
          setTimeout(() => {
            $this.showRightAnswer();
          }, 1000);
          setTimeout(() => {
            $this.goNextQuestion();
          }, 1500);
        }
      } else if (this.examinationInfo.type == 2) {
        this.moreChooseFlag = true
        if (this.userAnSwer.indexOf(answerIndex) > -1) {
          this.userAnSwer.splice(this.userAnSwer.indexOf(answerIndex), 1);
        } else {
          this.userAnSwer.push(answerIndex);
        }
        this.showClickAnswer();
      }
    },
    goNextQuestion() {
      // let audio = document.getElementById("audio");
      let answerText = '';
      let $this = this;
      $this.moreChooseFlag = false
      for (let i = 0; i < this.userAnSwer.length; i++) {
        answerText = answerText + this.opLetter[this.userAnSwer[i]];
      }
      let answerCommit = {
        paperDetailId: this.paperDetailId,
        options: answerText,
        examId: this.examId,
        totalTime: curanswerTime,
        examOver: this.isOver,
      };
      if (this.type == 6) {
        answerCommit.score = this.score;
        answerCommit.options = mp3Url;
      }
      if (isLoading) {
        return;
      }
      clearTimeout(playAudioIndexCount);
      if (this.isStudy != 2) {
        isLoading = true;
        utilJs.postMethod(global.apiurl + 'exam/saveAnswer', answerCommit, function (res) {
          isLoading = false;
          if ($this.isOver == 0) { //进入下一题
            $this.progress = Math.round(($this.examinationInfo.number / $this.examinationInfo.wholeNum) * 100);
            $this.setProgress();
            clearInterval(aswerControl);
            $this.getQuestion();
          } else { //最后一题
            $this.progress = Math.round(($this.examinationInfo.number / $this.examinationInfo.wholeNum) * 100);
            $this.setProgress();
            clearInterval(aswerControl);
            $this.$routerGo($this, "replace", {
              path: "/homePage/voiceTest/voiceTestResult",
              query: { paperMainId: $this.paperMainId, topicId: 0, ttId: $this.ttId, tpId: $this.tpId, tlId: $this.tlId, progress: $this.progress }
            })
          }
        },
          failRes => {
            isLoading = false;
          }
        );
      } else {
        if (this.isOver == 0) { //进入下一题
        clearInterval(aswerControl);
          this.getQuestion();
        } else { //最后一题或者提前交卷
          clearInterval(aswerControl);
          this.$routerGo(this, "replace", {
            path: "/homePage/voiceTest/voiceTestResult",
            query: { paperMainId: this.paperMainId, topicId: 0 }
          })
        }
      }
    },
    showClickAnswer() {
      for (let i = 0; i < this.opList.length; i++) {
        if (this.userAnSwer.indexOf(i) > -1) {
          this.opList[i].status = 1;
        } else {
          this.opList[i].status = 0;
        }
      }
    },
    showUserAnswer() {
      for (let i = 0; i < this.userAnSwer.length; i++) {
        if (this.rightAnswer.indexOf(this.opLetter[this.userAnSwer[i]]) > -1) {
          this.opList[this.userAnSwer[i]].status = 2;
        } else {
          this.opList[this.userAnSwer[i]].status = 3;
        }
      }
    },
    showRightAnswer() {
      for (let i = 0; i < this.opList.length; i++) {
        this.opList[i].status = 0;
        if (this.rightAnswer.indexOf(this.opLetter[i]) > -1) {
          this.opList[i].status = 2;
        }
      }
    },
    getQuestion() {
      let $this = this;
      this.examinationInfo = null;
      this.opList = [];
      this.rightAnswer = '';
      this.userAnSwer = [];
      this.problemShowType = -1;
      this.answerShowType = -1;
      this.playAudioIndex = -1;
      this.hasChoosed = 0;
      this.hasRecord = 0;
      this.isQuestionEnd = 0;
      this.showLoudspeaker = true;
      this.showFirstSpeak = true;
      this.score = '';
      this.wordAnly = '';
      this.isReject = 0;
      this.praticeTimes = 0;
      if (this.recordStatus == "RECORDING") {
        wxUtilJs.stopRecord();
        clearInterval(recordTimeCon);
        this.recordStatus = "START";
      }
      if (!document.getElementById('audio').ended) {
        document.getElementById("audio").pause();
      }
      utilJs.getMethod(global.apiurl + 'exam/examProcess/' + this.paperMainId + '?topicId=0' + '&number=' + this.curNum, function (res) {
        $this.examinationInfo = res;
        let contant = encodeURIComponent($this.examinationInfo.problem).replace(/%C2%A0/g, '%20').replace(/%E2%80%A9/g, '').replace(/%E2%80%8B/g, '').replace(/%E2%80%8E/g, '')
        $this.examinationInfo.problem = decodeURIComponent(contant)
        $this.rightAnswer = res.answer;
        $this.problemShowType = res.problemShowType;
        $this.paperDetailId = res.paperDetailId;
        $this.examId = res.examId;
        $this.speakType = res.speakType;
        $this.type = res.type;
        $this.loudspeaker = true;
        $this.examModel = res.paperInfo.examModel;
        $this.paperType = res.paperType;
        $this.isHandAudio = res.isHandAudio;
        curanswerTime = Number(res.continueTime);
        if (!$this.showPause) {
          $this.aswerTimeControl();
        }
        if ($this.isHandAudio == 1 && $this.examinationInfo.answerShowType == 1) {
          $this.answerShowType = 6;
          for (let i = 0; i < audioSrcs.length; i++) {
            if ($this.examinationInfo[texts[i]]) {
              $this.opList.push({
                text: $this.examinationInfo[texts[i]],
                audioSrc: $this.examinationInfo[audioSrcs[i]],
                imgSrc: $this.examinationInfo[imgSrcs[i]],
                status: 0
              });
            } else if ($this.examinationInfo[imgSrcs[i]]) {
              $this.opList.push({
                text: $this.examinationInfo[texts[i]],
                audioSrc: $this.examinationInfo[audioSrcs[i]],
                imgSrc: $this.examinationInfo[imgSrcs[i]],
                status: 0
              });
            } else if ($this.examinationInfo[audioSrcs[i]]) {
              $this.opList.push({
                text: $this.examinationInfo[texts[i]],
                audioSrc: $this.examinationInfo[audioSrcs[i]],
                imgSrc: $this.examinationInfo[imgSrcs[i]],
                status: 0
              });
              $this.answerShowType = 1;
            }
          }
          for (let item of $this.opList) {
            if (item.audioSrc) {
              $this.answerShowFlag = true; //有音频播放才显示
            } else {
              $this.answerShowFlag = false;
            }
            if (item.imgSrc && item.text) {
              $this.IsHandShowType = 1; //有文字,存在图片
            } else if (!item.imgSrc && item.text) {
              $this.IsHandShowType = 2;//只有文字
            } else if (item.imgSrc && !item.text) {
              $this.IsHandShowType = 3;//只有图片
            }
          }
        } else if ($this.examinationInfo.answerShowType == 1 && ($this.type == 1 || $this.type == 2)) {
          $this.answerShowType = $this.examinationInfo.answerShowType;
          for (let i = 0; i < audioSrcs.length; i++) {
            if ($this.examinationInfo[audioSrcs[i]]) {
              $this.opList.push({
                text: $this.examinationInfo[texts[i]],
                audioSrc: $this.examinationInfo[audioSrcs[i]],
                imgSrc: $this.examinationInfo[imgSrcs[i]],
                status: 0 //0: 未答题 1: 已选 2：答对 3：答错
              });
            }
          }
        } else if ($this.examinationInfo.answerShowType == 2 && ($this.type == 1 || $this.type == 2)) {
          for (let i = 0; i < texts.length; i++) {
            if ($this.examinationInfo[texts[i]]) {
              $this.opList.push({
                text: $this.examinationInfo[texts[i]],
                audioSrc: $this.examinationInfo[audioSrcs[i]],
                imgSrc: $this.examinationInfo[imgSrcs[i]],
                status: 0
              });
            } else if ($this.examinationInfo[imgSrcs[i]]) {
              $this.opList.push({
                text: $this.examinationInfo[texts[i]],
                audioSrc: $this.examinationInfo[audioSrcs[i]],
                imgSrc: $this.examinationInfo[imgSrcs[i]],
                status: 0
              });
            }
          }
          for (let item of $this.opList) {
            if (item.audioSrc) {
              $this.answerShowFlag = true; //有音频播放才显示
            } else {
              $this.answerShowFlag = false;
            }
            if (item.imgSrc && item.text) {
              $this.answerShowType = 5; //有文字,存在图片
            } else if (!item.imgSrc && item.text) {
              $this.answerShowType = 4;//只有文字
            } else if (item.imgSrc && !item.text) {
              $this.answerShowType = 7;//只有图片
            }
          }
        }
        // $this.$nextTick(() => {
        //   setTimeout(function () {
        //     $this.playRadio();
        //   }, 1000)
        // });
        $this.isOver = $this.curNum < res.wholeNum ? 0 : 1;
        $this.curNum = $this.curNum < res.wholeNum ? parseInt($this.curNum) + 1 : $this.curNum;
      });
    },
    hideIllustration() {
      // if (this.$refs.illustrationBar.classList.indexOf('illustrationHide') > -1) {
      this.$refs.illustrationBar.classList.add('illustrationHide');
      let $this = this;
      setTimeout(function () {
        $this.showIllustration = false;
      }, 500)
      // }
    },
    pauseExam() { //暂停
      if (this.recordStatus == "RECORDING") {
        this.$showCjToast({
          text: "录音过程中不能暂停",
          type: "warn",
          time: 1000
        });
        return;
      }
      if (!this.recordFlag) {
        wxUtilJs.stopRecord()
      }
      clearInterval(recordTimeCon);
      this.recordStatus = "START";

      if (document.getElementById('audio').ended && this.answerShowType == 1 &&
      this.type != 6 && this.playAudioIndex < this.opList.length) {
        clearTimeout(playAudioIndexCount);
      } else if (!document.getElementById('audio').ended) {
        document.getElementById("audio").pause();
      }
      clearInterval(aswerControl);
      this.showPause = true;
    },
    hideCountdown() { //倒计时结束
      if (this.showStart == true) {
        this.showStart = false;
        this.getQuestion();
      }
    },
    timeToStr(timeSecond) {
      //将秒转化为00:00:00格式
      let hour =
        Math.floor(timeSecond / 3600) >= 10
          ? Math.floor(timeSecond / 3600)
          : "0" + Math.floor(timeSecond / 3600);
      let minute =
        Math.floor((timeSecond % 3600) / 60) >= 10
          ? Math.floor((timeSecond % 3600) / 60)
          : "0" + Math.floor((timeSecond % 3600) / 60);
      let second =
        Math.floor(timeSecond % 60) >= 10
          ? Math.floor(timeSecond % 60)
          : "0" + Math.floor(timeSecond % 60);
      return hour + ":" + minute + ":" + second;
    },
    // 记录播放进度
    setProgress: function () {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: this.progress, //完成进度0-100
      }
      utilJs.postMethod(`${global.apiurl}k12/trainings/progress`, data, res => {
      });
    },
    //分享
    wechatShare: function () {
      let title = '';//this.examinationInfo.name;
      let shareImg = '';//this.examinationInfo.avatar ? this.examinationInfo.avatar : require('../../../assets/examination_defult.png');
      let shareUrl = '';//window.location.href.split("#")[0] + '#/homePage/examination/examinationDetail?ExaminationNo=' + this.topicId + '&refereeId=' + localStorage.getItem("userId");
      let shareDesc = '';//this.examinationInfo.shareDesc;//"共包含"+this.examinationInfo.hasPaper+"套考卷";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { }, true);
    },
    //手机端分享
    appShare: function () {
      var title = this.examinationInfo.name;
      var shareImg = this.examinationInfo.avatar ? this.examinationInfo.avatar : require('../../../assets/examination_defult.png');
      var shareUrl = window.location.href.split("#")[0] + '#/homePage/examination/examinationDetail?ExaminationNo=' + this.topicId + '&refereeId=' + localStorage.getItem("userId");
      var shareDesc = this.examinationInfo.shareDesc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  beforeRouteLeave(to, from, next) {
    clearTimeout(playAudioIndexCount);
    this.answerTime = "00:00:00";
    curanswerTime = 0;
    clearInterval(aswerControl);
    clearInterval(recordTimeCon);
    next();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.btn-wrap {
  width: 100%;
  max-width: 640px;
  border-top: 1px solid #ddd;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 11;
}
.btn-next-question {
  font-size: 0.7rem;
  text-align: center;
  height: 2rem;
  line-height: 2rem;
}
.choose {
  color: #fff;
  background-color: #1ba3e4;
}
input[type="text"],input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-appearance: none;
}
textarea {
  box-shadow:0px 0px 0px rgba(0,0,0,0);
  -webkit-box-shadow:0px 0px 0px rgba(0,0,0,0);
  -webkit-appearance: none;
}
.option-bg {
  background:rgba(242,242,242,1);
}
.option-choose {
  background: rgba(149,153,171,1);
}
.process-right {
  background:rgba(69,181,95,1);
}
.process-wrong {
  background:rgba(237,110,89,1);
}
.in {
  animation: zoomIn 0.3s ease-in-out;
  -webkit-animation: zoomIn 0.3s ease-in-out;
}
.illustrationHide {
  animation: stripeHide 0.5s ease-in-out;
  -webkit-animation: stripeHide 0.5s ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
.right-bg {
  background:rgba(88,226,120,0.8);
}
.wrong-bg {
  background:rgba(251,129,109,0.8);
}
.choose-bg {
  background:rgba(146, 159, 219, 0.8);
}
.stripe-none {
  color: #666;
  background:rgba(250,250,250,1);
}
.stripe-right {
  color: #fff;
  background:rgba(113,219,120,1);
}
.stripe-wrong {
  color: #fff;
  background:rgba(251,129,109,1);
}
.test-bg {
  background-color: #7390FE
}
.pause-bg {
  z-index: 888;
  border-radius: 0.75rem  0.75rem 0 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.comfirm-btn {
  background:rgba(115,144,254,1);
}
.record-circle {
  width:2.8rem;
  height:2.8rem;
  border-radius: 50%;
  background-color: rgba(115,144,254,1);
  box-shadow:0px 0px 0px 0.2rem rgba(115,144,254,0.3);
  -webkit-box-shadow:0px 0px 0px 0.2rem rgba(115,144,254,0.3);
}
.box{
  /* 最外层的盒子 */
  width:2.8rem;
  height:2.8rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background-color: rgba(115,144,254,1);
}
.mask{
  /* 遮住div多余的部分，呈现出线条的效果 */
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0.15rem;
  z-index: 2;
  border-radius: 50%;
  background-color: rgba(115,144,254,1);
}
.colorB {
  color: #FB816D;
}
.top-bx {
  box-shadow:0px 3px 20px 0px rgba(0, 0, 0, 0.05);
}
.record_bg {
  -webkit-animation: record_bg_change 2s infinite linear;
  animation: record_bg_change 2s infinite linear;
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
}
.record_out {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: record_out_zoom 1s infinite linear;
  animation: record_out_zoom 1s infinite linear;
  animation-direction:alternate;
  -webkit-animation-direction:alternate;
}
.bg-f5 {
  background-color: #f5f5f5;
}
.right-cir {
  background:rgba(113,219,120,1);
}
.wrong-cir {
  background:rgba(251,129,109,1);
}
.c-p-t22 {
  top:0.55rem;
}
.c-ph130 {
  padding-left: 3.25rem;
  padding-right: 3.25rem;
}
.c-bg-666 {
  background-color: #666;
}
@-webkit-keyframes record_out_zoom{
    0%{
        box-shadow:0px 0px 0px 0.2rem rgba(115,144,254,0.3);
        -webkit-box-shadow:0px 0px 0px 0.2rem rgba(115,144,254,0.3);
    }
    100%{
        box-shadow:0px 0px 0px 0.5rem rgba(115,144,254,0.3);
        -webkit-box-shadow:0px 0px 0px 0.5rem rgba(115,144,254,0.3);
    }
}
@keyframes record_out_zoom{
    0%{
        box-shadow:0px 0px 0px 0.2rem rgba(115,144,254,0.3);
        -webkit-box-shadow:0px 0px 0px 0.2rem rgba(115,144,254,0.3);
    }
    100%{
        box-shadow:0px 0px 0px 0.5rem rgba(115,144,254,0.3);
        -webkit-box-shadow:0px 0px 0px 0.5rem rgba(115,144,254,0.3);
    }
}
@-webkit-keyframes record_bg_change{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.6;
    }
}
@keyframes record_bg_change{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.6;
    }
}
@keyframes zoomIn {
  0% {
    font-size: 0.3rem;
    width: 0.3rem;
    height: 0.3rem;
  }
  100% {
    font-size: 0.9rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    font-size: 0.3rem;
    width: 0.3rem;
    height: 0.3rem;
  }
  100% {
    font-size: 0.9rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}
@keyframes stripeHide {
  0% {
    height: 1.6rem;
  }
  100% {
    height: 0;
  }
}
@-webkit-keyframes stripeHide {
  0% {
    height: 1.6rem;
  }
  100% {
    height: 0;
  }
}
.c-bg-time {
  background: rgba(108, 131, 255, 0.1);
}
</style>


